<template>
  <div class="dashboard-container">
    <el-row :gutter="24">
      <el-col :span="24" class="s18">
        <div class="grid-content1 bg-purple-dark" @click="show3 = !show3">
          <span><i :class="show3? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/> {{ show3? $t('search.select') : $t('search.select2') }}</span>
        </div>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <div v-show="show3">
        <el-row :gutter="20" class="queryConditions">
          <!-- 订单编号 -->
          <el-col :span="8">
            <el-row>
              <el-col :span="6"><span>{{ $t('search.orderNum') }}</span></el-col>
              <el-col :span="15">
                <el-input
                  v-model.trim="orderId"
                  :placeholder="$t('search.orderNum')"
                  clearable/>
              </el-col>
            </el-row>
          </el-col>
          <!-- 提交时间 -->
          <el-col :span="8">
            <el-row>
              <el-col :span="6"><span>{{ $t('search.submissionTime') }}</span></el-col>
              <el-col :span="15">
                <el-date-picker
                  v-model="dataTime"
                  :default-time="['00:00:00', '23:59:59']"
                  :start-placeholder="$t('search.startime')"
                  :end-placeholder="$t('search.endtime')"
                  type="datetimerange"
                  style="width:100%;"
                  range-separator="-"/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-button type="primary">{{ $t('table.look') }}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>

    <div class="title">
      <svg-icon icon-class="dataList" class-name="custom-class"/>
      <p style="display: inline;">{{ $t('table.list') }}</p>
      <div style="float:right;">
        <el-button size="mini">{{ $t('table.batchDelivery') }}</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="logding"
      ref="multipleTable"
      :row-key="getRowKeys"
      :data="tableData.slice((pageno - 1) * pagesize, pageno * pagesize)"
      style="width: 100%"
      border
      tooltip-effect="dark"
      @selection-change="handleSelectionChange">

      <el-table-column :reserve-selection="false" type="selection" width="50"/>

      <!-- 序号 -->
      <el-table-column :index="typeIndex" :label="$t('table.numOrder')" type="index" width="100"/>

      <!-- 订单编号 -->
      <el-table-column :label="$t('table.orderNum')" width="230">
        <template slot-scope="scope">
          <span>{{ scope.row.subOrderId }}</span>
        </template>
      </el-table-column>

      <!-- 提交时间 -->
      <el-table-column :label="$t('table.submissionTime')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFilter }}</span>
        </template>
      </el-table-column>

      <!-- 买家姓名 -->
      <el-table-column :label="$t('table.buyname')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.buyerName }}</span>
        </template>
      </el-table-column>

      <!-- 买家联系方式 -->
      <el-table-column :label="$t('table.buyerTell')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.buyerTel }}</span>
        </template>
      </el-table-column>

      <!-- 卖家 -->
      <el-table-column :label="$t('table.sellerName')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.receiveName }}</span>
        </template>
      </el-table-column>

      <!-- 手机号码 -->
      <el-table-column :label="$t('table.tell')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.receiveTel }}</span>
        </template>
      </el-table-column>

      <!-- 订单金额 -->
      <el-table-column :label="$t('table.orderMon')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.orderAmount * 100 / 10000 }}</span>
        </template>
      </el-table-column>

      <!-- 订单状态 -->
      <el-table-column :label="$t('table.orderstatus')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.status | statusFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="$t('table.deliveryAddress')" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ $t('table.orderstatus') }}: {{ scope.row.receiveAddr }}</p>
            <div slot="reference">
              <div v-if="(scope.row.receiveAddr).length > 10">{{ (scope.row.receiveAddr).substring(0,10) + '...' }}</div>
              <div v-else>{{ scope.row.receiveAddr }}</div>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <!-- 自动确认收货时间 -->
      <el-table-column :label="$t('table.time1')" width="200">
        <template>
          <span>15天</span>
        </template>
      </el-table-column>

      <!-- 订单应收货时间 -->
      <el-table-column :label="$t('table.time2')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.consigneeTime | dateFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.bulkgoods')"
        fixed="right"
        width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 3" type="text">{{ $t('table.bulkgoods') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="pagination">
      <el-pagination
        :page-size="pagesize"
        :total="tableData.length"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { tackGoods } from '@/api/order'
export default {
  name: 'Confirm',
  filters: {
    statusFilter(status) {
      const statusMap = {
        '1': '待付款',
        '2': '待发货',
        '3': '已发货',
        '4': '已收货',
        '6': '已完成',
        '8': '已退款',
        '5': '已退款',
        '7': '已关闭'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      show3: true, // 显示筛选
      dataTime: '', // 提交时间
      orderId: '', // 订单编号
      logding: false, // 加载
      getRowKeys(row) { // 翻页全选
        return row.orderId
      },
      index: 1, // 第一页
      tableData: [], // 表格数据
      pagesize: 10, // 每页显示20条
      pageno: 1 // 显示第一页
    }
  },
  created() {
    this.tackGoods()
  },
  methods: {
    // 多选
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    },
    // 序号
    typeIndex(index) {
      return index + (this.pageno - 1) * 10 + 1
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    handleCurrentChange(currentPage) {
      this.pageno = currentPage
    },
    // 确认收货
    tackGoods() {
      const self = this
      self.logding = true
      const params = new URLSearchParams()
      tackGoods(params).then(res => {
        // console.log(res)
        if (res.code === 200) {
          self.logding = false
          self.tableData = res.result
        } else {
          self.logding = false
          self.tableData = []
        }
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.grid-content {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
}
.grid-content1 {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  text-align: right;
  padding-right: 20px;
}
.bg-purple-dark {
  background: rgba(243, 243, 243, 1);
}
.s18 {
  padding-right: 0!important;
}
.s6 {
  padding-left: 0!important;
}
.queryConditions span {
  font-size: 16px;
  line-height: 40px;
}
.title {
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 40px;
  background: rgba(243, 243, 243, 1);
}
.dashboard-container >>> .sel .el-input__inner {
  height: 24px!important;
  line-height: 24px!important;
  font-size: 13px!important;
}
.pagination {
  margin: 30px auto;
  text-align: center;
}
</style>
